<template>
  <div style="display: flex;flex-direction: column;height: 100%">
    <Space direction="vertical">
      <Space wrap>
        <Button class="handle-btn" type="primary" @click="toFormatJson">格式化</Button>
<!--        <Button @click="edit">插入文本</Button>-->

        <Dropdown style="margin-left: 20px" @on-click="changeLanguage">
          <Button type="primary">
            {{ language }}
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <template #list>
            <DropdownMenu>
              <DropdownItem name="json">json</DropdownItem>
              <DropdownItem name="html">html</DropdownItem>
              <DropdownItem name="css">css</DropdownItem>
              <DropdownItem name="typescript">ts</DropdownItem>
            </DropdownMenu>
          </template>
        </Dropdown>
      </Space>
    </Space>
    <div class="editor-container">
      <MonacoEditor ref="monacoEditor"></MonacoEditor>

    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import prettier from 'prettier/standalone'
import prettierPluginBabel from 'prettier/plugins/babel'
// import prettierPluginEstree from 'prettier/plugins/estree'
import prettierPluginVue from 'prettier/plugins/html'


import MonacoEditor from "@/components/monaco-editor/index.js"
import {usePrettierHandle} from './prettierHandle.js'
const {
  monacoEditor,
  prettierFormat
}=usePrettierHandle()

async function toFormatJson() {
  prettierFormat({
    parser: 'vue',
    plugins: [prettierPluginBabel, prettierPluginVue],
  })
}


const language=ref()
function changeLanguage(v){
  console.log(v)
  language.value=v
  monacoEditor.value.editorHandle().setLanguage(v)
}
onMounted(()=>{
  language.value=monacoEditor.value.editorHandle().model.getLanguageId()
})

function edit(){
  monacoEditor.value.editorHandle().animateEdit()
}
</script>

<style scoped>
.handle-btn {
  margin: 16px 24px;
}
.editor-container{
  width: 100%;
  height: 200px;
  flex-grow: 1;
}
</style>
